/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;

.help-panel {
  @include styles.styles-reset;
  word-wrap: break-word;
  padding-block-start: awsui.$space-panel-header-vertical;
  padding-block-end: 0;

  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  hr {
    border-block: none;
    border-inline: none;
    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
    margin-block: awsui.$space-scaled-xl;
    margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
  }

  ol,
  ul {
    padding-inline-start: awsui.$space-l;
    list-style-position: outside;
    margin-block: awsui.$space-s;
    margin-inline: 0;
  }
  li {
    margin-block: awsui.$space-scaled-xxs;
    margin-inline: 0;
  }

  a,
  h2,
  h3,
  h4,
  h5,
  pre,
  code {
    margin-block: awsui.$space-xs;
    margin-inline: 0;
    padding-block: 0;
  }

  code {
    @include styles.code-highlight;
  }

  pre {
    @include styles.code-highlight;
    padding-block: awsui.$space-xxs;
    padding-inline: awsui.$space-xxs;
  }

  dl {
    margin-block: awsui.$space-s;
    margin-inline: 0;
    /* stylelint-disable-next-line selector-max-universal */
    * {
      margin-block: 0;
    }
  }
  dt {
    margin-block-start: awsui.$space-xs;
    font-weight: styles.$font-weight-bold;
  }
  dd {
    margin-block-start: 0;
    margin-block-end: awsui.$space-xs;
    margin-inline: 0;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block-start: awsui.$space-xl;
    color: awsui.$color-text-heading-default;
  }
  // sets padding at the bottom of the panel
  & > :last-child {
    margin-block-end: awsui.$space-panel-content-bottom;
  }

  // add basic font-sizes
  p {
    color: inherit;
    text-decoration: none;
    margin-block: awsui.$space-s;
    margin-inline: 0;
  }
  h1 {
    @include styles.font-heading-xl;
  }
  h2 {
    @include styles.font-heading-l;
  }
  h3 {
    @include styles.font-heading-m;
  }
  h4 {
    @include styles.font-heading-s;
  }
  h5 {
    @include styles.font-heading-xs;
  }
  b,
  strong {
    font-weight: styles.$font-weight-bold;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}

.loading {
  padding-inline-start: awsui.$space-panel-side-left;
  padding-inline-end: awsui.$space-panel-side-right;
}

.header {
  @include styles.font-panel-header;
  color: awsui.$color-text-heading-default;
  padding-block-end: awsui.$space-panel-header-vertical;
  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
  // padding to make sure the header doesn't overlap with the close icon
  border-block: none;
  border-inline: none;
  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
  margin-block-start: 0;
  margin-block-end: awsui.$space-panel-content-top;
  .with-toolbar > & {
    border-color: transparent;
    margin-block-end: 0px;
  }

  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  h2,
  h3,
  h4,
  h5,
  h6 {
    @include styles.font-panel-header;
    padding-block: 0;
    margin-block: 0;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}

.content {
  color: awsui.$color-text-body-secondary;
  padding-inline-start: awsui.$space-panel-side-left;
  padding-inline-end: awsui.$space-panel-side-right;

  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child,
  p:first-child {
    margin-block-start: 0;
  }

  a {
    @include styles.link-inline;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}

.footer {
  color: awsui.$color-text-body-secondary;
  padding-block: 0;
  padding-inline-start: awsui.$space-panel-side-left;
  padding-inline-end: awsui.$space-panel-side-right;
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  ul {
    list-style: none;
    padding-inline-start: 0;
  }
  a {
    @include styles.link-default;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}

.content,
.footer {
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  a:focus {
    @include styles.link-focus;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}
